/* сделай кнопку с позиции дисайблед */
import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm, SubmitHandler } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchRegistration } from '../../store/auth/auth.actions';
import { useEffect } from 'react';

export const Register = () => {
	const {error, success} = useAppSelector(state => state.registration);
	const dispatch = useAppDispatch();
	useEffect(() => {

	}, [success]);
	
	console.log('ошибка в компоненте', error);

	/* RHF */
	interface IInputs {
	email: string,
	password: string,
	fullName: string
}
	const {
		register,
		handleSubmit,
		control,
		formState: { errors }
	} = useForm<IInputs>({mode: 'onBlur'});
	const onSubmit: SubmitHandler<IInputs> = (data) => dispatch(fetchRegistration(data));
	/* */
	return (
		<>
			{success === true ? 
				<div>Переход на страницу главная</div>
				:
				<div>
					{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
					<h2>Регистрация</h2>
					<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
						<div className={styles.input}>
							<label htmlFor="email">Ваш email*</label>
							<input
								id="email"
								{...register('email', {
									required: 'Обязательное поле',
									validate: {
										isEmail: value => /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i.test(value) || 'Введите корректный ящик'
									}
								})}
								type="text"
								className={styles.inputItem}
							/>
							{errors.email?.message && <p style={{ color: 'red' }}>{errors.email?.message}</p>}
						</div>
						<div className={styles.input}>
							<label htmlFor="password">Ваш пароль*</label>
							<input
								id="password"
								{...register('password', {
									required: 'Обязательное поле',
									validate: {
										number: value => /\d/.test(value) || 'Пароль должен содержать хотя бы одну цифру!',
										letter: value => /[A-Za-z]/.test(value) || 'Пароль должен содержать хотя бы одну букву!',
										upperLetter: value => /[A-Z]/.test(value) || 'Пароль должен содержать одну заглавную букву!'
									}
								})}
								type="password"
								className={styles.inputItem}
							/>
							{errors.password?.message && <p style={{ color: 'red' }}>{errors.password?.message}</p>}
						</div>
						<div className={styles.input}>
							<label htmlFor="fullName">Ваше имя*</label>
							<input
								id="fullName"
								{...register('fullName', {
									required: 'Обязательное поле'
								})}
								type="text"
								className={styles.inputItem}
							/>
							{errors.fullName?.message && <p style={{ color: 'red' }}>{errors.fullName?.message}</p>}
						</div>
						<Button appearance="big">Зарегистрироваться</Button>
					</form>
					<DevTool control={control} />
					<div className={styles.navigation}>
						<div>
          Есть аккаунт?{' '}
							<Link
								style={{ color: '#ffa600' }}
								className={styles.href}
								to="/auth/login"
							>
            Войти
							</Link>
						</div>
						<div>
							<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
							</Link>
						</div>
					</div>
				</div>
			}
		</>
		
	);
};
